<template>
<div>
    <!-- 联网订购票查询 -->
    <div class="container">
        <!-- 表单 -->
        <el-form :inline="true" :model="formList" class="ticketForm" id="netBookingEnquiry">
            <el-form-item label="售票时间起">
                <el-date-picker type="date" size="mini" class="minipt" v-model="formList.startDate"></el-date-picker>
                至
                <el-date-picker type="date" size="mini" class="minipt" v-model="formList.endDate"></el-date-picker>
            </el-form-item>
            <el-form-item label="线路" class="minipt">
                <el-input size="mini" v-model="formList.query1" class="inp"></el-input>
            </el-form-item>
            <el-form-item label="班次号">
                <el-input size="mini" v-model="formList.query2" class="inp"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input size="mini" v-model="formList.query5"></el-input>
            </el-form-item>
            <el-form-item label="证件号">
                <el-input size="mini" v-model="formList.query6"></el-input>
            </el-form-item>
            <el-form-item label="订单状况" lable-width="55px">
                <el-select  size="mini" v-model="formList.query8">
                    <el-option value="yes">已锁位(未支付)</el-option>
                    <el-option value="no">否</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="业务类型">
                <el-select  size="mini" v-model="formList.query8">
                    <el-option value="yes">站内人工售票</el-option>
                    <el-option value="no">站内人工售票</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班次日期">
                <el-date-picker type="date" size="mini" class="minipt" v-model="formList.startDate"></el-date-picker>
            </el-form-item>
            <button class="check-btn rf"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">
                取消订单</button>
            <button class="check-btn rf"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">
                查询</button>
        </el-form>
        <!-- 表格 -->
        <div>
            <el-table style="width: 100%">
                <el-table-column prop="" label="操作类型">
                </el-table-column>
                <el-table-column prop="" label="票号"></el-table-column>
                <el-table-column prop="" label="票型"></el-table-column>
                <el-table-column prop="" label="状态"></el-table-column>
                <el-table-column prop="" label="退票费率"></el-table-column>
                <el-table-column prop="" label="退还金额"></el-table-column>
                <el-table-column prop="" label="班次日期"></el-table-column>
                <el-table-column prop="" label="时间"></el-table-column>
                <el-table-column prop="" label="目的地"></el-table-column>
                <el-table-column prop="" label="班次号"></el-table-column>
                <el-table-column prop="" label="座号"></el-table-column>
                <el-table-column prop="" label="操作员"></el-table-column>
                <el-table-column prop="" label="操作时间"
                                 :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
                ></el-table-column>
            </el-table>
        </div>
        <!-- 合计 -->
        <div class="total">
            合计:<span></span>
        </div>
        <!-- 分页 -->
        <div class="pagination">
            <el-pagination
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </div>
</div>
</template>
<script>
    export default {
        data() {
            return {
                formList: {
                    startDate: "",
                    endDate: "",
                    query1: "",
                    query2: "",
                    query3: "",
                    query4: "",
                    startDate1: "",
                    endDate1: "",
                    query5: "",
                    query6: "",
                    query7: "",
                    query8: ""
                }
            };
        },
        methods: {
            getTableData() {
                this.tableData = [];
                this.$http
                    .post("/query/tks/booking/detail/list")
                    .then(data => {
                        console.log(data);
                        for (var item of data.data.list) {
                            this.tableData.push({
                                order_type:item.order_type,
                                order_no:item.order_no,
                                bus_date:item.bus_date,
                                dstnode_name:item.dstnode_name,

                            });
                        }

                        console.log(this.tableData);
                    });
            }
        },
        //
        mounted() {
            this.getTableData();


    }

    }

</script>
<style scoped >
    @import url('../../assets/css/check/netBookingEnquiry.css');
    .el-date-editor.el-input{
        width:150px!important;
    }
    .check_btn,.check_btn:hover{
        background: #009688;
        border-radius: 5px;
        border: 0px;
        color: white;
        cursor: pointer;
        padding:10px 20px;
    }
    .check_btn img{
        vertical-align: middle;
    }
    .form_btn{
        float:right;
        margin-right:70px;
    }
</style>